<nz-modal [(nzVisible)]="displayRackItemVisible"
          [nzWidth]="1400"
          [nzTitle]="title"
          [nzFooter]="null"
          (nzOnCancel)="handleCancel()"
          class="device-setting"
          [nzClosable]="true"
          [nzMaskClosable]="true"
>
  <div class="send-request">
    <button
      nz-button
      nzType="primary"
      [disabled]="setOfCheckedId.size === 0 && !this.startHierarchy"
      [nzLoading]="loading"
      (click)="sendRequest23()"
    >
      保存为弹簧货道
    </button>
    <button
      nz-button
      nzType="primary"
      [disabled]="setOfCheckedId.size === 0 && !this.startHierarchy"
      [nzLoading]="loading"
      (click)="sendRequest25()"
      style="margin-left: 10px"
    >
      保存为电磁货道
    </button>
    <span *ngIf="!this.startHierarchy">已选择 {{ setOfCheckedId.size + '个'}} </span>
    <span *ngIf="this.startHierarchy">已选择 {{ hierarchyNum + '层'}} </span>
    <input nz-input [type]="'number'" [(ngModel)]="startHierarchy" placeholder="开始层数" nzSize="default" style="width: 100px;margin:5px 15px" (ngModelChange)="onEndHierarchyChange($event)"/><span style="margin-right: 5px">至</span>
    <input nz-input [type]="'number'" placeholder="结束层数" [(ngModel)]="endHierarchy" nzSize="default" style="width: 100px;margin:5px 15px" [disabled]="!startHierarchy" (ngModelChange)="onEndHierarchyChange($event)"/>
    <span style="color: red">注意：使用层级输入会忽略已选货道</span>
  </div>
  <nz-table
    #rowSelectionTable [nzData]="listOfData"
    nzShowPagination
    nzShowSizeChanger
    [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
    (nzPageIndexChange)="nzPageIndexChange($event)"
    [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
    [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions"
    (nzPageSizeChange)="onPageSizeChange($event)"
    (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
  >
    <tbody>
    <ng-template ngFor let-data [ngForOf]="rowSelectionTable.data">
      <tr>
        <td
          style="font-size: 18px;font-weight: bold"
          [nzShowCheckbox]="true"
          [nzChecked]="data.checked"
          [nzDisabled]="!!this.startHierarchy"
          (nzCheckedChange)="onGroupChecked(data)"
          (click)="this.startHierarchy?'':onGroupChecked(data)"
        >
          第{{ data.hierarchy }}层
        </td>
        <td
          [nzShowCheckbox]="true"
          [nzChecked]="item.checked"
          [nzDisabled]="!!this.startHierarchy"
          (nzCheckedChange)="onItemChecked(item, data )"
          (click)="this.startHierarchy?'':onItemChecked(item, data )"
          *ngFor="let item of data.displayRackItemVoList">
          {{item.freightLane}}货道({{getDeviceTypeName(item.deviceTypeId)}})
        </td>
      </tr>

    </ng-template>
    </tbody>
  </nz-table>
</nz-modal>
